<template>
  <div class="statistics-view">
    <div v-for="item in dataList" :key="item.id">
      <span class="statistics-view-value">{{ item.value }}</span>
      <p class="statistics-view-label">
        <i
          :class="[item.iconUrl, 'iconfont']"
          :style="{ color: item.color }"
        ></i
        >
        <span>{{ item.label }}</span>
      </p>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs } from 'vue';
import i18n from '@src/locales';
import { getThemeColor } from '@src/util/business/color'

export default {
  setup() {
    const state = reactive({
      dataList: [
        {
          id: '1',
          label: i18n.t('contract.planTaskStatistics.state[1]'),
          value: 233,
          iconUrl: 'icon-file-text-fill',
          color: getThemeColor(),
        },
        {
          id: '2',
          label: i18n.t('contract.planTaskStatistics.state[2]'),
          value: 126,
          iconUrl: 'icon-detail-fill',
          color: '#FFA726',
        },
        {
          id: '3',
          label: i18n.t('contract.planTaskStatistics.state[3]'),
          value: 89,
          iconUrl: 'icon-carryout-fill',
          color: '#52C41A',
        },
      ],
    });

    

    return {
      ...toRefs(state),
    };
  },
};
</script>
<style lang="scss" scoped>
@import './Statistics.scss';
</style>